<template>
  <div class="person">
    <h1>toRefs与toRef的用法</h1>
    <h1>姓名：{{ name }}--{{ person.name }}--{{}}</h1>
    <h1>年龄：{{ age }}--{{ person.age }}</h1>
    <button @click="updateName">修改名字</button>
    <button @click="updateAge">修改年龄</button>
  </div>
</template>

<script setup>
import { reactive, toRefs, toRef } from "vue";
//数据
let person = reactive({
  name: "小王",
  age: 18,
});
//解构赋值
//toRefs是把reactive对象中的属性解构出来，转换成ref对象;toRefs作用是可以把所有的属性一次性都响应出来
let { name, age } = toRefs(person); //本质是:let name=persoon.name; let age=person.age
console.log(name, age);
console.log(toRefs(person));
//toRef作用:也是把reactive对象中的属性解构出来，转换成ref对象，但需要一个个定义
let name1 = toRef(person, "name");
console.log(name1);
//方法
function updateName() {
  // person.name += "~";
  name.value += "~";
  console.log(name.value, person.name);
}
function updateAge() {
  // person.age += 1;
  age.value += 1;
  console.log(age);
}
</script>

<style scoped></style>
